<template>
	<!-- 教师展示课程列表  学生展示 AI分析 -->
	<page-body>
		<view class="page">
			<view class="flex benben-position-layout flex flex-wrap align-center AIStudy_flex_0"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex flex-wrap align-center justify-between flex-sub AIStudy_fd0_0'>
					<view class='flex flex-wrap align-center AIStudy_fd0_0_c0'>
					</view>
					<view class='flex flex-wrap align-stretch justify-center'>
						<text class='AIStudy_fd0_0_c1_c0'>{{group==1?'AI学':'课程'}}</text>
					</view>
					<view class='flex flex-wrap align-center justify-end AIStudy_fd0_0_c0'>
					</view>
				</view>

			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
			<!---flex布局flex布局开始-->
			<view class="flex benben-flex-layout flex-wrap align-center AIStudy_flex_1" v-if="group==1">
				<view class='flex flex-wrap align-stretch AIStudy_fd1_0'>
					<view @tap.stop="selectShow = true" class='flex flex-wrap align-center'>
						<text class='AIStudy_fd1_0_c0_c0'>{{selectName}}</text>
						<text class='fu-iconfont2  AIStudy_fd1_0_c0_c1'>&#xe78a;</text>
					</view>
					<u-picker @cancel="selectShow = false;" :show="selectShow" @confirm="confirm"
						:columns="columns"></u-picker>
					<view class="AIStudy_fd1_0_c1" v-if="show">
						<qiun-data-charts :canvas2d='true' :reshow='true' :chartData="optionObj" :ontouch='true'
							chart-type='10' type='radar' :opts='optionObj' />
					</view>

				</view>
			</view>

			<!---flex布局flex布局结束-->
			<!---flex布局flex布局开始-->
			<view class="flex benben-flex-layout flex-wrap align-center AIStudy_flex_2" v-if="group==1">
				<view class='flex flex-direction flex-wrap align-stretch flex-sub AIStudy_fd2_0'>
					<text class='AIStudy_fd2_0_c0'>{{$t('提升建议')}}</text>

					<view class='flex flex-direction align-center justify-around MyPortrayal_fd1_7_c1_c0'
						v-if="percent!==100">
						<view class='flex flex-wrap align-center'>
							<text class='MyPortrayal_fd1_7_c1_c0_c0_c0'>{{percent}}</text>
							<text class='MyPortrayal_fd1_7_c1_c0_c0_c1'>%</text>
						</view>
						<view class='flex flex-wrap align-center'>
							<view class='flex benben-progress-bar MyPortrayal_fd1_7_c1_c0_c1_c0'>
								<view class='benben-progress-bar-center MyPortrayal_progress1_fd1_7_c1_c0_c1_c0'
									:style="{width: percent+'%'}"></view>

							</view>
						</view>
						<view class='flex flex-wrap align-center'>
							<text class='MyPortrayal_fd1_7_c1_c0_c2_c0'>{{$t('AI分析中…')}}</text>
						</view>
					</view>
					<view class='flex flex-wrap align-center MyPortrayal_fd1_7_c1_c1' v-else>
						<view class="content" v-html="textStr"></view>
					</view>

				</view>
			</view>
			
			<view class='flex flex-wrap align-center justify-between index_fd2_1' v-if="group==2">
				<view class='flex flex-wrap align-center index_fd0_0_c0_ben' >
					<image class='index_fd0_0_c0_c0_ben' mode="aspectFit" src='@/static/img02/search.png'></image>
					<text class='index_fd0_0_c0_c1_ben'>{{$t('请输入关键词进行搜索')}}</text>
				</view>
				<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout flex_2_ibhf" v-for='(item,key0) in list'>
				    <view class='flex flex-direction flex-wrap align-stretch fd2_0_ibhf' :key='key0'>
				        <view class='flex flex-wrap align-stretch' @tap.stop="handleJumpDiy" data-type="navigateTo"
						:data-url="`/pages/kc/kcdetail/kcdetail?course=${item.aid}`" >
				            <image class='fd2_0_c0_c0_ibhf' mode="aspectFill"  :src='item.cover?item.cover:STATIC_URL+"LOGO.png"'></image>
				            <view class='flex flex-direction flex-wrap align-stretch flex-sub'>
				                <text class='fd2_0_c0_c1_c0_ibhf'>{{item.name}}</text>
				                <text class='fd2_0_c0_c1_c1_ibhf'>{{item.create_name}}</text>
				            </view>
				        </view>
				        <view class='flex flex-direction flex-wrap align-stretch' >
				            <view class='flex flex-wrap align-center fd2_0_c1_c0_ibhf' style="margin-top: 30rpx;" @tap.stop="jumpclass(items)" v-for="(items,index) in item.classes" :key='index'>
				                <text>{{items.name}}</text>
				                <text class='fd2_0_c1_c0_c1_ibhf'>{{items.students_count}}人</text>
				                <text class='fu-iconfont2' style="font-size: 24rpx;">&#xe7f2;</text>
				            </view>
				           
				        </view>
				    </view>
				</view>
				<!-- <template v-for='(item,key0) in list'>
					<view class='flex flex-direction  align-center justify-between index_fd2_1_c02'
						@tap.stop="handleJumpDiy" data-type="navigateTo"
						:data-url="`/pages/kc/kcdetail/kcdetail?course=${item.aid}`" :key='key0'>
						<image class='index_fd2_1_c0_c0 imgds' mode="aspectFill" :src='item.cover'></image>
						<view class='flex flex-direction flex-wrap align-stretch flex-sub index_fd2_1_c0_c1'>
							<text class='index_fd2_1_c0_c1_c02 hid1'>{{group==1?item.courseplan_name:item.name}}</text>
						</view>
					</view>
				</template> -->
				<fu-empty :pagingListLoadedAll="pagingListLoadedAll" :pagingListNoListData="pagingListNoListData"
					:listDataLength="listDataLength" :isLoadInit="isLoadInit"></fu-empty>
			</view>
			<!-- AI -->
			<AIicon v-if="group==2"></AIicon>
			<!---flex布局flex布局开始-->
			<!-- <view class="flex flex-wrap align-center justify-center benben-flex-layout AIStudy_flex_3">
				<button class='AIStudy_fd3_0' @tap.stop="jump()">{{$t('制定学习目标')}}</button>
			</view> -->
		</view>
	</page-body>
</template>
<script>
	import AIicon from "@/pages/My/AIChat/AIicon.vue"
	import pagingList from '@/common/mixin/paging_list.js';
	import {
		mdToHtml
	} from '@/common/utils/mdParser.js'

	export default {
		components: {
			AIicon
		},
		mixins: [pagingList],

		data() {
			return {
				"minixPagingListsApi": "",
				"pageingListApiMethod": "",
				"allowOnloadGetList": false,
				"Swiper": [],
				"list": [],
				group:1,
				columns: [
					['我的成绩画像', '岗位能力画像']
				],
				selectShow: false,
				selectName: '我的成绩画像',
				percent: 0,
				show: false,
				textStr: '',
				optionObj: {
					"categories": [],
					"series": [{
						"name": "成绩",
						"data": []
					}, ],
					"color": ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					"padding": [-20, -20, -20, -40],
					"dataLabel": false,
					"enableScroll": false,
					"legend": {
						"show": false,
						"position": "right",
						"lineHeight": 25
					},
					"extra": {
						"radar": {
							"gridType": "radar",
							"gridColor": "#CCCCCC",
							"gridCount": 4,
							"opacity": 0.2,
							"max": 200,
							"labelShow": true,
							"border": true,
							"labelFontSize": 10,
						}
					}
				}

			};
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo
			},
		},
		watch: {},
		onLoad(options) {
			
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {
			this.group=uni.getStorageSync('USER_GROUP') 
			if(uni.getStorageSync('USER_GROUP') == 1){
				uni.setTabBarItem({
				  index: 1,
				  text: 'AI学',
				  iconPath: "/static/tab/tab_diy2.png",
				  selectedIconPath: "/static/tab/tab_diy2_active.png",
				})
				// 动态设置 TabBar 某项的内容
				this.courseApi()
				
				this.loadingHandle()
			}else{
				uni.setTabBarItem({
				  index: 1,
				  text: '课程',
				  iconPath: "/static/tab/tab_diy1.png",
				  selectedIconPath: "/static/tab/tab_diy1_active.png",
				})
				this.getai6f224689e374Func()
			}
		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			getai6f224689e374Func() {
				let url=''
				if(uni.getStorageSync('USER_GROUP')==1){
					url= global.apiUrls.post68c9345a8e5b8
				}else{
					url= global.apiUrls.post68c392e0f23e8
				}
				this.minixPagingListsApi = url;
				this.pageingListApiMethod = 'get';
				this.allowOnloadGetList = false;
				this.pagingListPostDataContent = {
					type:1
				}
				this.listData = [];
				this.list = this.listData
				// console.log("this.list=>", this.list)
				this.pagingListToggle();
				this.$forceUpdate()
			},
			pagingListPostData() {
				return this.pagingListPostDataContent
			},
			jumpclass(item){
				uni.navigateTo({
					url:'/pages/kc/kcbjpeople/kcbjpeople?name='+item.name+'&id='+item.aid
				})
			},
			loadingHandle() {
				this.percent = 0
				var s = setInterval(item => {
					if (this.percent <= 99) {
						this.percent++
					} else {
						clearInterval(s)
					}
				}, 150)
			},
			confirm(e) {
				console.log('vvvvvvvvvvv', e);
				if (e.value[0] !== this.selectName) {
					this.selectName = e.value[0]

					if (this.selectName == '我的成绩画像') {
						this.optionObj.padding = [-20, -20, -20, -40]
						this.courseApi()
						this.loadingHandle()
					} else if (this.selectName == '岗位能力画像') {
						this.optionObj.padding = [0, 0, 0, 0]
						this.jobCapability()
						this.loadingHandle()
					}
				}

				this.selectShow = false
			},
			jump() {
				this.$message.info('敬请期待')
			},
			//岗位能力
			async jobCapability() {
				this.optionObj.categories = []
				this.optionObj.series[0].data = []
				let res = await this.$api.get(global.apiUrls.post684939c8c028b, {});

				if (res.data.code != 1) {
					this.$message.info(res.data.msg);
					return
				}

				this.optionObj.categories = res.data.data.radar.slice(0, 6).map((item) => {
					let name = item.name.replace(/【|】/g, '')
					return name.length > 6 ? name.slice(0, 6) + '...' : name
				})
				this.optionObj.series[0].data = res.data.data.data[0].data

				this.show = true


				//ai分析
				let res2 = await this.$api.post(global.apiUrls.post68c910fcdbef9, {
					agent_id: "62",
					query: `根据岗位能力【${this.optionObj.categories}】画像数据【${this.optionObj.series[0].data}】，请以一位老师的角度，给出该学生【${this.userInfo.real_name}】的详细分析及优化建议`
				})
				console.log('ppppppppppppppp', res2);

				if (res2.data.code != 1) {
					this.$message.info(res2.data.msg);
					return
				} else {
					// this.textStr = mdToHtml(res2.data.data.answer)
				    this.textStr = res2.data.data.answer
				}

			},
			//获取课程
			async courseApi() {
				this.optionObj.categories = []
				this.optionObj.series[0].data = []

				let res = await this.$api.get(global.apiUrls.post68da586a81e91, {});
				console.log('llllllllllllll', res.data.data);


				if (res.data.code != 1) {
					this.$message.info(res.data.msg);
					return
				}

				this.optionObj.categories = res.data.data.radar.slice(0, 6).map((item) => {
					let name = item.name.replace(/【|】/g, '')
					return name.length > 6 ? name.slice(0, 6) + '...' : name
				})
				this.optionObj.series[0].data = res.data.data.data[0].data

				this.show = true

				//ai分析
				let res2 = await this.$api.post(global.apiUrls.post68c910fcdbef9, {
					agent_id: "62",
					query:  `根据我的成绩画像【${this.optionObj.categories}】画像数据【${this.optionObj.series[0].data}】，请以一位老师的角度，给出该学生【${this.userInfo.real_name}】的详细分析及优化建议`
				})

				console.log('ppppppppppppppp', res2);

				if (res2.data.code != 1) {
					this.$message.info(res2.data.msg);
					return
				} else {
					this.textStr = mdToHtml(res2.data.data.answer)
				}
			},
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #F8F8F8;
		background-size: 100% auto;
	}

	.MyPortrayal_fd1_7_c1_c1_c0 {
		font-size: 24rpx;
		color: rgba(102, 102, 102, 1);
		font-weight: 400;
		line-height: 48rpx;
	}

	.MyPortrayal_fd1_7_c1_c1 {
		background: #f3f6f8;
		border-radius: 16rpx;
		background-size: 100% auto;
		padding: 24rpx;
	}

	.MyPortrayal_fd1_7_c1_c0_c2_c0 {
		font-size: 24rpx;
		color: #333;
		font-weight: 500;
		line-height: 33rpx;
	}

	.MyPortrayal_progress1_fd1_7_c1_c0_c1_c0 {
		background: rgba(20, 94, 253, 1);
		border-radius: 10rpx 10rpx 10rpx 10rpx;
	}

	.MyPortrayal_fd1_7_c1_c0_c1_c0 {
		border: 1px solid rgba(20, 94, 253, 0.1);
		background: rgba(20, 94, 253, 0.10);
		width: 300rpx;
		height: 20rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		background-size: 100% auto;
	}

	.MyPortrayal_fd1_7_c1_c0_c0_c1 {
		color: rgba(20, 94, 253, 1);
		font-size: 32rpx;
		font-weight: 700;
		line-height: 32rpx;
		text-decoration: none;
	}

	.MyPortrayal_fd1_7_c1_c0_c0_c0 {
		font-size: 48rpx;
		line-height: 56rpx;
		font-weight: 700;
		color: rgba(20, 94, 253, 1);
	}

	.MyPortrayal_fd1_7_c1_c0 {
		background: #f3f6f8;
		border-radius: 16rpx;
		background-size: 100% auto;
		padding: 24rpx;
		height: 286rpx;
	}

	.AIStudy_flex_0 {
		background: #f8f8f8;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.AIStudy_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 700;
		color: #333333;
		line-height: 50rpx;
	}

	.AIStudy_fd0_0_c0 {
		width: 120rpx;
	}

	.AIStudy_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
	}

	.AIStudy_flex_1 {
		padding: 0rpx 24rpx 0rpx 24rpx;
		margin: 24rpx 0rpx 0rpx 0rpx;
	}

	.AIStudy_fd1_0_c1 {
		width: 100%;
		height: 500rpx;
	}

	.AIStudy_fd1_0_c0_c1 {
		font-size: 16rpx;
		color: rgba(153, 153, 153, 1);
	}

	.AIStudy_fd1_0_c0_c0 {
		color: rgba(51, 51, 51, 1);
		font-size: 32rpx;
		font-weight: 500;
		line-height: 50rpx;
		margin: 0rpx 16rpx 0rpx 0rpx;
	}

	.AIStudy_fd1_0 {
		background: var(--benbenbgColor1);
		width: 702rpx;
		height: 600rpx;
		border-radius: 24rpx;
		background-size: 100% auto;
		padding: 32rpx 24rpx 32rpx 24rpx;
	}

	.AIStudy_flex_2 {
		margin: 24rpx 0rpx 0rpx 0rpx;
		padding: 0rpx 24rpx 0rpx 24rpx;
	}

	.AIStudy_fd2_0_c1 {
		background: #f3f6f8;
		min-height: 232rpx;
		padding: 24rpx;
		background-size: 100% auto;
		border-radius: 16rpx;
		margin: 24rpx 0rpx 0rpx 0rpx;
	}

	.AIStudy_fd2_0_c0 {
		font-weight: 500;
		font-size: 32rpx;
		color: rgba(51, 51, 51, 1);
		line-height: 50rpx;
	}

	.AIStudy_fd2_0 {
		background: var(--benbenbgColor1);
		background-size: 100% auto;
		border-radius: 24rpx;
		padding: 32rpx 24rpx 32rpx 24rpx;
	}

	.AIStudy_flex_3 {
		margin: 40rpx 0rpx 0rpx 0rpx;
	}

	.AIStudy_fd3_0 {
		background: #4781f5;
		border-radius: 44rpx;
		width: 622rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		color: #fff;
		font-weight: 500;
		margin-bottom: 20rpx;
	}
	.index_fd2_1 {
		margin: 0rpx 24rpx 0rpx 24rpx;
		padding-top: 42rpx;
	}
	.index_fd2_1_c0 {
		background: var(--benbenbgColor1);
		width: 702rpx;
		height: 194rpx;
		border-radius: 16rpx;
		background-size: 100% auto;
		margin: 0rpx 0rpx 18rpx 0rpx;
	}
	.index_fd2_1_c02 {
		background: #F7FAFF;
		// width: 48%;
		width: 339rpx;
	    height:280rpx;
		border-radius: 16rpx;
		background-size: 100% auto;
		margin: 0rpx 0rpx 24rpx 0rpx;
	}
	.index_fd2_1_c0_c1_c0 {
		margin: 16rpx 0rpx 90rpx 0rpx;
		color: #131D34;
		font-size: 28rpx;
		font-weight: 500;
		line-height: 40rpx;
		-webkit-line-clamp: 1;
		width: 342rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}
	.index_fd2_1_c0_c1_c02 {
		// margin: 16rpx 0rpx 24rpx 0rpx;
		color: #131D34;
		font-size: 28rpx;
		font-weight: 500;
		line-height: 40rpx;
		// width: 342rpx;
	}
	
	
	.index_fd2_1_c0_c1 {
		width: 100%;
		height: 89rpx;
		padding:24rpx;
	}
	
	.index_fd2_1_c0_c0 {
		width: 288rpx;
		height: 162rpx;
		border-radius: 16rpx 16rpx  0 0 ;
		margin: 16rpx 0 0 16rpx;
	}
	.imgds{
		width: 100%;
		margin: 0;
		height: 191rpx;
	}
	.flex_2_ibhf {
	            padding: 24rpx;
				width: 100%;
	            .fd2_0_ibhf {
	                background: #FFFFFF;
	                width: 100%;
	                // box-shadow: 0rpx 1rpx 4rpx 1rpx rgba(0, 0, 0, 0.06);
	                min-height: 210rpx;
					border-radius: 16rpx;
	                padding: 24rpx 16rpx 24rpx 16rpx;
	
	                .fd2_0_c0_c0_ibhf {
	                    width: 288rpx;
	                    height: 162rpx;
	                    border-radius: 8rpx;
	                    margin: 0rpx 20rpx 0rpx 0rpx;
	                }
	
	                .fd2_0_c0_c1_c0_ibhf {
	                    margin: 12rpx 0rpx 20rpx 0rpx;
	                    color: #131D34;
	                    font-size: 28rpx;
	                    font-weight: 500;
	                    line-height: 40rpx;
	                    text-align: left;
	                    font-style: normal;
	                }
	
	                .fd2_0_c0_c1_c1_ibhf {
	                    color: #7A7B80;
	                    font-size: 24rpx;
	                    font-weight: 400;
	                    line-height: 35rpx;
	                    text-align: left;
	                    font-style: normal;
	                }
	            }
				.fd2_0_c1_c0_ibhf {
				    // margin: 0rpx 0rpx 30rpx 0rpx;
				}
				
				.fd2_0_c1_c0_c1_ibhf {
				    margin: 0rpx 0rpx 0rpx auto;
					color: #999999;
				}
	        }
			.index_fd0_0_c0_ben {
				background: #FFFFFF;
				width: 100%;
				width: 100%;
				height: 64rpx;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				background-size: 100% auto !important;
				padding: 0rpx 32rpx 0rpx 32rpx;
				margin: 0rpx 24rpx 0rpx 24rpx;
				opacity: 1;
			}
			.index_fd0_0_c0_c0_ben {
				width: 32rpx;
				height: 32rpx;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
			}
			.index_fd0_0_c0_c1_ben {
				margin: 0rpx 0rpx 0rpx 24rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #A4A6AB;
			}
</style>